<template>
	<view class="scan-recommend">
		<!-- 顶部导航 -->
		<custom-header title="扫码推荐" sticky />
		<!-- 花材信息 -->
		<view class="info-section">
			<view class="section-title">花材信息</view>

			<view class="info-item">
				<text class="info-label">推荐花材</text>
				<view class="info-value">
					<text class="flower-name">蜜桃雪山（香槟）</text>
					<text class="flower-grade">A级</text>
				</view>
			</view>

			<view class="info-item">
				<text class="info-label">供应商家</text>
				<text class="info-value">柯莘花卉1</text>
			</view>

			<view class="info-item">
				<text class="info-label">推荐场次</text>
				<text class="info-value">2025-06-16</text>
			</view>

			<view class="info-item">
				<text class="info-label">近7天质检</text>
				<text class="info-value">缺货：999 退货：999 降级：999</text>
			</view>

			<view class="info-item">
				<text class="info-label">近7天推荐次数</text>
				<text class="info-value">999</text>
			</view>

			<view class="info-item">
				<text class="info-label">历史推荐次数</text>
				<text class="info-value">999</text>
			</view>
		</view>

		<!-- 本次推荐 -->
		<view class="recommend-section">
			<view class="section-title">本次推荐</view>

			<view class="info-item">
				<text class="info-label">推荐人员</text>
				<text class="info-value">宁满欣</text>
			</view>

			<view class="info-item">
				<text class="info-label">提交时间</text>
				<text class="info-value">2025-06-16 20:38:19</text>
			</view>

			<view class="info-item">
				<text class="info-label">推荐理由</text>
				<view class="info-value">
					<input v-model="recommendReason" placeholder="请输入推荐理由" class="reason-input" />
				</view>
			</view>

			<view class="info-item upload-item">
				<text class="info-label">推荐凭证<text class="required">*</text></text>
				<view class="upload_box">
					<custom-upload v-model="imageList"></custom-upload>
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-button" @click="saveRecommend">
			<text class="save-text">保存</text>
		</view>
		
		
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast"
			></custom-toast>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const {
		isShowToast,
		toastConfig,
		showToast,
		hideToast
	} = useToast()
	
	const confirmToast = (data)=>{
		// 保存成功提示
		if(data?.type == 'back'){
			hideToast()
			uni.navigateBack()
		}else{
			hideToast()
		}
	}

	// 推荐理由
	const recommendReason = ref('')
	// 上传图片
	const imageList = ref([])

	// 保存推荐
	const saveRecommend = () => {
		if (!recommendReason.value.trim()) {
			showToast('请填写推荐理由')
			return
		}
		if(!imageList.value || !imageList.value.length){
			showToast('请上传推荐凭证')
			return
		}
		
		showToast({
			message:'保存成功',
			data:{
				type:'back'
			}
		})
	}
</script>

<style lang="scss" scoped>
	.scan-recommend {
		min-height: 100vh;
		// background: #f7f7f7;
		padding-bottom: 120rpx;

		// 信息区域
		.info-section,
		.recommend-section {
			margin: 24rpx 24rpx 0;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 24rpx;

			.section-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 24rpx;
			}

			.info-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 24rpx;
				justify-content: space-between;

				&:last-child {
					margin-bottom: 0;
				}

				&.upload-item {
					flex-direction: column;

					.info-label {
						margin-bottom: 20rpx;
					}

					.info-value {
						width: 100%;
						padding-left: 0;
					}
				}

				.info-label {
					width: 200rpx;
					font-size: 24rpx;
					color: #999999;
					flex-shrink: 0;
					line-height: 1.5;
				}

				.info-value {
					// flex: 1;
					font-size: 24rpx;
					color: #555;
					line-height: 1.5;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.flower-name {
						color: #555;
					}

					.flower-grade {
						color: #F5564D;
						margin-left: 8rpx;
					}

					.reason-input {
						width: 100%;
						height: 64rpx;
						padding: 0 20rpx;
						border: 1rpx solid #f0f0f0;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #555;
						text-align: right;

						&::placeholder {
							color: #D7D7D7;
						}
					}

					.upload-area {
						width: 200rpx;
						height: 200rpx;
						border: 2rpx dashed #e0e0e0;
						border-radius: 8rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						background: #fafafa;

						.upload-icon {
							font-size: 60rpx;
							color: #cccccc;
							margin-bottom: 16rpx;
						}

						.upload-text {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.required {
					color: #F5564D;
				}
			}
		}

		// 保存按钮
		.save-button {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			right: 40rpx;
			height: 88rpx;
			background: #F5564D;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.save-text {
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 600;
			}
		}
	}
</style>